import React, { useState } from 'react'
import { Modal, Form, Input, Button, InputNumber, Select, Upload, message } from "antd"
import Uploadavatar from "./uploadavatar"
let { Option } = Select;
export default function Dialog(props) {
    const layout = {
        labelCol: { span: 24 },
        wrapperCol: { span: 24 },
    };
    const validateMessages = {
        required: '${label}必须填写',
        number: {
            range: '${label}必须在${min}到${max}之间'
        },
    };

    const onFinish = (values) => { //表单完成事件
        console.log(values);
    };

    const handleSelectChange = (info) => { //下拉框选择触发事件

    }
    const showDialog = () => {

    }

    return (
        <Modal onCancel={props.onCancel} visible={props.dialogVisible} footer={false}>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                <Form.Item name={['imageUrl']} valuePropName="imgValue" label="商品图片">
                    <Uploadavatar />
                </Form.Item>
                <Form.Item name={['category']} label="选择类目" rules={[{ required: true }]}>
                    <Select value="lucy" style={{ width: 240 }} onChange={handleSelectChange}>
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="disabled" disabled>
                            Disabled
                        </Option>
                        <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                </Form.Item>
                <Form.Item name={['productName']} label="商品名称" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['price']} label="商品价格" rules={[{ type: 'number', min: 0.1, max: 9999, required: true }]}>
                    <InputNumber />
                </Form.Item>
                <Form.Item name={['inventory']} label="商品库存" rules={[{ required: true }]}>
                    <Input />
                </Form.Item>
                <Form.Item name={['description']} label="商品描述" rules={[{ required: true }]}>
                    <Input.TextArea />
                </Form.Item>
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }} rules={[{ required: true }]}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}